<!--
  - Copyright (c) 2018-2019.
  -  This file is part of the moonpie production
  -  (c) johnzhang <875010341@qq.com>
  -  This source file is subject to the MIT license that is bundled
  -  with this source code in the file LICENSE.
  -->

<template>
    <div class="am-btn-group am-dropdown" data-am-dropdown>
        <button class="am-btn am-btn-secondary am-dropdown-toggle" data-am-dropdown-toggle><i class="am-icon-plus"></i>添加分组</button>
        <div class="am-dropdown-content user-tag-add-content">
            <base-form v-bind:collect-form-data="this.saveNewTag" v-bind:handle-form-submit="this.updateUserTag" v-bind:action="initConfig.urlConfig.addNewTagUrl">
                <template v-slot:main>
                    <div class="am-form-group">
                        <label>分组名</label>
                        <input type="text" class="am-form-field" v-model="tag.name" placeholder="分组名称"/>
                    </div>
                </template>
            </base-form>
        </div>
    </div>
</template>

<script>
    import BaseForm from "@/backend/components/basic/BaseForm";

    export default {
    name: "UserTagAdd",
    components: {BaseForm},
    props: ['initConfig'],
    methods: {
      saveNewTag() {
        return {tag_name: this.tag.name}
      },
      updateUserTag(result, $btn) {
        $btn.attr('disabled', false)
        //这里同步新增的信息
        if(result.code == 1) {
          this.initConfig.tags.push(result.data.tag)
          $(this.$el).dropdown('close')
        }else {
          layer.msg(result.msg || '添加用户标签出现错误', {icon: 5})
        }
      }
    },
    data() {
      return {
        tag: {name: '', id: null, count: 0}
      }
    }
  }
</script>

<style scoped>
    .user-tag-add-content {
        width: 200px;
    }
</style>